// 节点
<template>
  <div class="main_node">
    <Tooltip placement="right" v-if="!verifyInfo.pass">
      <template slot="title">
        <span v-for="item in verifyInfo.message" :key="item">{{ item }}</span>
      </template>
      <span class="verify_mark">
        <Icon type="warning" style="color: red; font-size: 18px" />
      </span>
    </Tooltip>
    <div
      :class="`main_content${
        !verifyInfo.pass ? ' main_content_error_border' : ''
      }`"
    >
      <div class="header" :style="`background-color:${bgc}`">
        <p v-if="!headerEdit" class="headerText" @click.stop="editHeader">
          <Icon :type="icon" style="font-size: 20px; margin-right: 3px" />
          {{ headerText }}
        </p>
        <Input
          v-model="headerText"
          ref="headerInput"
          v-else
          class="headerInput"
          @blur="onBlur"
          @pressEnter="onEnter"
        >
        </Input>
        <span
          v-if="type !== 'O' && editType !== 3"
          class="close"
          @click.stop="removeNode"
          ><Icon type="close" class="closeIcon"
        /></span>
      </div>
      <div class="details" @click="editNode">
        {{ nodeContent }}
      </div>
    </div>
    <div class="main_action">
      <AddButton
        @handleAdd="handleAdd"
        :branchDisabled="hasBranch"
        v-if="editType !== 3"
      />
    </div>
  </div>
</template>

<script>
import AddButton from "../button/AddButton.vue";
import EventBus from "../eventBus";
import Input from "ant-design-vue/lib/input";
import Icon from "ant-design-vue/lib/icon";
import verifyProps from "../../utils/verify";
import Tooltip from "ant-design-vue/lib/tooltip";
import "ant-design-vue/lib/tooltip/style/css";
export default {
  props: {
    data: Object,
    editType: Number,
  },
  components: {
    AddButton,
    Input,
    Icon,
    Tooltip,
  },
  data() {
    return {
      verifyInfo: {
        pass: true,
        message: [],
      },
      headerEdit: false,
      headerText: "",
    };
  },
  created() {
    this.headerText = this.data.props.title || "";
  },

  mounted() {
    EventBus.$on("VERIFY", this.confirmVerify); //监听校验
    EventBus.$on("UPDATE_NODE_VERIFYINFO_" + this.data.nodeId, this.verifyNode);
  },

  beforeDestroy() {
    EventBus.$off("VERIFY", this.confirmVerify);
    EventBus.$off(
      "UPDATE_NODE_VERIFYINFO_" + this.data.nodeId,
      this.verifyNode
    );
  },

  watch: {
    "data.props.title"(val) {
      this.headerText = val;
    },
    "data.nodeId"(val, oldVal) {
      // console.log("节点变化了！！！！！！！！！！！！！");
      // 树构建的时候不会走
      EventBus.$off("UPDATE_NODE_VERIFYINFO_" + oldVal, this.verifyNode);
      EventBus.$on("UPDATE_NODE_VERIFYINFO_" + val, this.verifyNode);
      console.log(this.verifyInfo.pass);
      if (this.verifyInfo.pass === false) {
        this.verifyInfo = {
          pass: true,
          message: [],
        };
      }
    },
  },
  computed: {
    type() {
      return this.data.type;
    },
    icon() {
      switch (this.type) {
        case "O":
          return "deployment-unit";
        case "C":
          return "issues-close";
        case "E":
          return "check-circle";
        case "S":
          return "cluster";
        case "T":
          return "clock-circle";
        default:
          return "";
      }
    },
    bgc() {
      switch (this.type) {
        case "O":
          return "black";
        case "C":
          return "green";
        case "E":
          return "#0066FF";
        case "S":
          return "gray";
        case "T":
          return "CadetBlue";
        default:
          return "black";
      }
    },

    hasBranch() {
      return (
        (this.data.conditionNode && this.data.conditionNode.length > 0) ||
        (this.data.shuntNode && this.data.shuntNode.length > 0)
      );
    },

    nodeContent: function () {
      if (this.data.content) {
        return this.data.content;
      } else {
        let type = this.data.type;
        switch (type) {
          case "O":
            return "请设置发起人";
          case "C":
            return "请设置条件";
          case "E":
            return "请设置审批人";
          case "S":
            return "请设置发起人";
          case "T":
            return "请设置时间";
          default:
            return "";
        }
      }
    },
  },
  methods: {
    verifyNode() {
      let verifyInfo = verifyProps(this.data.type, this.data.props);
      console.log("verifyInfo==>" + this.data.type, verifyInfo);
      this.verifyInfo = verifyInfo;
      return verifyInfo;
    },

    confirmVerify() {
      let verifyInfo = this.verifyNode();
      EventBus.$emit("VERIFY_CALLBACK", {
        id: this.data.nodeId,
        ...verifyInfo,
      });
    },
    editHeader() {
      if (this.editType === 3) return;
      this.headerEdit = true;
      this.$nextTick(() => {
        this.$refs.headerInput && this.$refs.headerInput.focus();
      });
    },
    onBlur() {
      this.headerEdit = false;
      this.updateNode();
    },
    onEnter() {
      this.onBlur();
    },
    handleAdd(type) {
      let eventName = "";
      switch (type) {
        case "C_BRANCH":
          eventName = "ADD_C_BRANCH";
          break;
        case "E_BRANCH":
          eventName = "ADD_E_BRANCH";
          break;
        default:
          eventName = "ADD_CHILD";
      }
      EventBus.$emit(eventName, this.data.path, type);
    },
    removeNode() {
      EventBus.$emit("REMOVE_NODE", this.data.path, this.type);
    },
    editNode() {
      if (this.editType === 3) return;
      let dataProps = JSON.parse(JSON.stringify(this.data.props));
      const { nodeId, prevId } = this.data;
      EventBus.$emit("EDIT_NODE", {
        path: [...this.data.path],
        type: this.data.type,
        nodeId,
        prevId,
        dataProps,
      });
    },

    updateNode() {
      let data = JSON.parse(JSON.stringify(this.data));
      data.props.title = this.headerText;
      let updateData = {
        nodeId: data.nodeId,
        path: data.path,
        dataProps: data.props,
      };
      EventBus.$emit("UPDATE_NODE", updateData);
    },
  },
};
</script>

<style scoped>
.main_node {
  position: relative;
  z-index: 9999;
  width: 200px;
}
.verify_mark {
  display: inline-block;
  position: absolute;
  top: 5px;
  right: -35px;
  height: 30px;
  width: 30px;
  background: white;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.verify_mark:hover {
  box-shadow: 0 0 10px #fff;
}

.close {
  position: absolute;
  color: #fff;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center;
}

.headerText {
  box-sizing: border-box;
  height: 40px;
  width: 160px;
  color: #fff;
  text-align: left;
  margin: 0;
  line-height: 40px;
  padding-left: 10px;
}

.headerInput {
  box-sizing: border-box;
  height: 25px;
  width: 150px;
  text-align: left;
  margin: 0;
  padding: 0;
  margin-left: 10px;
  line-height: 40px;
  border: none;
  box-shadow: none;
  padding-left: 5px;
  border-radius: 2px;
}

.headerInput:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.closeIcon {
  font-size: 14px;
  color: #ffffff;
}

.close:hover .closeIcon {
  font-size: 16px;
  /* font-weight: bold; */
}

.main_content {
  width: 100%;
  border: 1px solid transparent;
}

.main_content_error_border {
  border: 1px solid rgba(255, 0, 0, 0.2);
}

.main_content:hover .close {
  display: inline-flex;
}

.main_content:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.header {
  position: relative;
  height: 40px;
  text-align: left;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.details {
  padding: 5px;
  text-align: left;
  min-height: 50px;
  background: #fff;
}

.main_action {
  height: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_action::after {
  content: "";
  height: 100%;
  width: 1px;
  background: #ddd;
  position: absolute;
}
</style>